<template>
  <div>
    <div class="navbar">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>
          <router-link to="/dashboard/dash" class="nav-link">首页</router-link>
        </el-breadcrumb-item>
        <el-breadcrumb-item>
          <router-link :to="{ 
            name: 'Dashboard',
            params: { 
              standardName: standardName 
            }
          }" class="nav-link">{{ standardName || '标准管理' }}</router-link>
        </el-breadcrumb-item>
        <el-breadcrumb-item>
          <router-link :to="{ 
            name: 'project-manage',
            params: { 
              param: projectId
            }
          }" class="nav-link">{{ projectName || '项目管理' }}</router-link>
        </el-breadcrumb-item>
        <el-breadcrumb-item>
          <router-link :to="{ 
            name: 'people',
            params: { 
              param: projectId,
              standardName: standardName,
              projectName: projectName
            }
          }" class="nav-link">人员管理</router-link>
        </el-breadcrumb-item>
        <el-breadcrumb-item>
          <router-link :to="{ 
            name: 'audit_list',
            params: { 
              projectId: projectId,
              standardName: standardName,
              projectName: projectName
            }
          }" class="nav-link">授权列表</router-link>
        </el-breadcrumb-item>
        <el-breadcrumb-item>
          <span class="current-page">考核授权</span>
        </el-breadcrumb-item>
      </el-breadcrumb>
      <div class="nav-back">
        <el-button type="text" @click="handleBack">
          <i class="el-icon-arrow-left"></i> 返回
        </el-button>
      </div>
    </div>

    <div class="container">
      <!-- 视频和试卷区域 -->
      <div class="video-exam-section">
        <!-- 操作视频区域 -->
        <div class="video-section">
          <h2>操作视频:</h2>
          <video :src="VideoUrl" width="300" height="300" controls>
                您的浏览器不支持视频标签。
              </video>
          
        </div>
        <!-- 试卷下载区域 -->
        <div class="exam-section">
          <h2>试卷:</h2>
          <iframe :src="PaperUrl" width="300" height="300"></iframe>
        </div>
      </div>
      <!-- 授权按钮区域 -->
      <div class="authorization-section">
        
        <div class="button-container">
          <template v-if="passStatus === 1">
            <span>已授权</span>
          </template>
          <template v-else-if="passStatus === 2">
            <span>已驳回</span>
          </template>
          <template v-else>
            <p>请您根据审核结果，决定是否授权？</p>
            <button class="btn green" @click="grantAuthorization">授权</button>
            <button class="btn red" @click="openRejectionDialog">驳回</button>
          </template>
        </div>
      </div>

      <!-- 驳回理由对话框 -->
      <dialog id="rejectionDialog">
        <form method="dialog">
          <h2>请输入驳回理由</h2>
          <textarea v-model="rejectionReason" placeholder="在此输入驳回理由..."></textarea>
          <div class="button-container">
            <button type="button" class="btn green" @click="submitRejection">提交</button>
            <button type="button" class="btn red" @click="closeRejectionDialog">取消</button>
          </div>
        </form>
      </dialog>
    </div>
  </div>
</template>

<script>
import axios from 'axios'; // 确保已经安装并引入 axios

export default {
  props: ['id', 'pass', 'projectId', 'uId'],
  data() {
    return {
      rejectionReason: '',
      PaperUrl: '',
      VideoUrl: '',
      passStatus: null,
      studyId: null,
      projectId: null,
      standardName: '',
      projectName: '',
      staId: null,
      uId: null
    };
  },
  created() {
    // 获取路由参数
    const { projectId, standardName, projectName, staId } = this.$route.params;
    const { id, pass, uId } = this.$route.query;
    
    // 优先使用路由传递的参数
    this.projectId = projectId;
    this.standardName = standardName || '未知标准';
    this.projectName = projectName || '未知项目';
    this.staId = staId;
    this.studyId = id;
    this.passStatus = parseInt(pass);
    this.uId = uId;

    // 如果路由参数不完整，尝试从 localStorage 获取
    if (!projectId || !standardName || !projectName) {
      const savedParams = JSON.parse(localStorage.getItem('auditParams') || '{}');
      this.projectId = this.projectId || savedParams.projectId;
      this.standardName = this.standardName || savedParams.standardName || '未知标准';
      this.projectName = this.projectName || savedParams.projectName || '未知项目';
      this.staId = this.staId || savedParams.staId;
      this.studyId = this.studyId || savedParams.studyId;
      this.passStatus = this.passStatus || parseInt(savedParams.pass);
      this.uId = this.uId || savedParams.uId;
    }

    // 保存到 localStorage 以便后续使用
    localStorage.setItem('auditParams', JSON.stringify({
      projectId: this.projectId,
      standardName: this.standardName,
      projectName: this.projectName,
      staId: this.staId,
      studyId: this.studyId,
      pass: this.passStatus,
      uId: this.uId
    }));

    console.log('接收到的参数:', {
      projectId: this.projectId,
      standardName: this.standardName,
      projectName: this.projectName,
      staId: this.staId,
      studyId: this.studyId,
      pass: this.passStatus,
      uId: this.uId
    });

    if (this.studyId) {
      this.fetchStudyResources();
    } else {
      console.error('未接收到必要的参数');
    }
  },
  methods: {
    // 获取视频和试卷资源
    async fetchStudyResources() {
      try {
          const response = await axios.get('http://localhost:8081/training/getStudyResources', {
          params: {
            studyId: this.studyId
          }
        });
        
        const data = response.data;
        if (data) {
          this.VideoUrl = data.videoUrl;
          this.PaperUrl = data.paperUrl;
          console.log('获取到的资源:', data);
        } else {
          console.error('获取学习资源为空');
          alert('获取资源失败，请重试。');
        }
      } catch (error) {
        console.error('获取学习资源失败:', error);
        alert('获取学习资源失败，请重试。');
      }
    },
    // 授权操作
    async grantAuthorization() {
      try {
        const response = await axios.post('http://localhost:8081/training/addTextToCertificate', {
          sId: this.studyId
        });
        console.log('授权响应：', response.data);
        this.passStatus = 1; // 更新状态为已授权
        alert('授权成功！');
        // 重新获取资���以更新 URL
        this.fetchStudyResources();
      } catch (error) {
        console.error('授权失败:', error);
        alert('授权失败，请重试。');
      }
    },
    // 打开驳回理由对话框
    openRejectionDialog() {
      this.rejectionReason = '';
      const dialog = document.getElementById('rejectionDialog');
      if (dialog) {
        dialog.showModal();
      } else {
        console.error('找不到对话框元素');
      }
    },
    // 关闭驳回理由对话框
    closeRejectionDialog() {
      const dialog = document.getElementById('rejectionDialog');
      if (dialog) {
        dialog.close();
      } else {
        console.error('找不到对话框元素');
      }
    },
    // 提交驳回理由
    async submitRejection() {
      if (this.rejectionReason.trim() !== '') {
        try {
          const response = await axios.post('http://localhost:8081/training/rejectAudit', {
            sId: this.studyId,
            reason: this.rejectionReason
          });
          console.log(response.data);
          this.passStatus = 2; // 更新状态为驳回
          this.closeRejectionDialog();
          alert('驳回成功！');
        } catch (error) {
          console.error('驳回失败:', error);
          alert('驳回失败，请重试。');
        }
      } else {
        alert('请输入驳回理由');
      }
    },
    // 通过视频审核
    approveVideo() {
      // 实现具体逻辑，例如调用后端接口
      console.log('视频已通过');
      // 示例：可以调用相应的后端接口来记录视频审核通过
    },
    // 不通过视频审核
    rejectVideo() {
      // 实现具体逻辑，例如打开驳回理由对话框
      console.log('视频未通过');
      this.openRejectionDialog();
    },
    // 通过试卷审核
    approveExam() {
      // 实现具体逻辑，例如调用后端接口
      console.log('试卷已通过');
      // 示例：可以调用相应的后端接口来记录试卷审核通过
    },
    // 不通过试卷审核
    rejectExam() {
      // 实现具体逻辑，例如打开驳回理由对话框
      console.log('试卷未通过');
      this.openRejectionDialog();
    },
    // 返回方法
    handleBack() {
      this.$router.push({
        name: 'audit_list',
        params: { 
          param: this.projectId,
          standardName: this.standardName,
          projectName: this.projectName,
          staId: this.staId
        }
      });
    }
  }
};
</script>

<style scoped>
.navbar {
  padding: 20px;
  background-color: #f5f7fa;
  box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
  margin-bottom: 20px;
  border-radius: 4px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.nav-back {
  margin-left: auto;
}

.nav-back .el-button {
  font-size: 14px;
  color: #909399;
}

.nav-back i {
  margin-right: 5px;
}

.el-breadcrumb {
  font-size: 16px;
  line-height: 1.5;
}

.el-breadcrumb ::v-deep .el-breadcrumb__inner a {
  color: #909399;  /* 非当前页面使用灰色 */
  font-weight: 400;
  font-size: 16px;
}

.current-page {
  color: #409EFF !important;  /* 当前页面使用蓝色 */
  font-weight: 500;
  font-size: 16px;
}

.container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.video-exam-section {
  display: flex;
  justify-content: space-around;
  width: 100%;
}

.video-section, .exam-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 20px;
  width: 35%; /* 设置视频和试卷区域的宽度 */
}

video {
  width: 100%;
  max-width: 100%; /* 调整视频的最大宽度以适应容器 */
}

.btn {
  margin: 0 10px; /* 在按钮之间添加水平间距 */
  padding: 10px 20px; /* 增加内距使按钮更宽更高 */
  font-size: 16px; /* 增加字体大小 */
  border-radius: 8px; /* 增加边框圆角 */
  margin: 5px;
}


.green {
  background-color: #44cf64; /* 绿色按钮的背景色 */
  color: white; /* 按钮文字颜色 */
}

.red {
  background-color: #f05464; /* 红色按钮的背景色 */
  color: white; /* 按钮文字颜色 */
}

.authorization-section {
  background-color:rgb(232, 218, 218);
  margin-top: 20px;
  width: 100%;
  text-align: center; /* 使文本居中显示 */
  border-radius: 10px;
  width: 90%;
  padding-top: 10px;
  padding-bottom: 20px;
}

.authorization-section p {
  margin-bottom: 20px; /* 在文本和按钮之间添加一些垂直间距 */
}

.authorization-section .btn {
  margin-top: 10px; /* 在按钮之间添加一些垂直间距 */
}

dialog {
  border: none;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.26);
  padding: 20px;
  width: 50%; /* 设置宽度为视口宽度的50% */
  max-width: 600px;
}

dialog::backdrop {
  background: rgba(0, 0, 0, 0.5);
}

textarea {
  width: 100%;
  height: 100px;
  margin-bottom: 20px;
}

</style>